<template>
  <div class="container">
    <Header v-bind:isBack="isBack" v-bind:title="title"></Header>
    <!-- 推荐分类部分 -->
    <div class="type">
      <div class="top areatop space-between">
        <span class="title fs-32">推荐分类</span>
      </div>
      <div class="type-list">
        <div class="content">
          <span class="tip" @click="checkType(item)" :class="item.recommend_song_sheet_id == typeChecked ?'active':''" v-for="(item,index) in typeList" :key="index">{{item.music_list_category_name}}</span>
        </div>
      </div>
    </div>
    <!-- 除推荐分类以外的分类 -->
    <div class="type" v-for="item in allType" :key="item.id">
      <div class="top areatop space-between">
        <span class="title fs-32">{{item.music_list_category_name}}</span>
      </div>
      <div class="type-list">
        <div class="content">
          <span class="tip" @click="checkType1(items)" :class="items.id == typeChecked ?'active':''" v-for="(items,index) in item.son" :key="index">{{items.music_list_category_name}}</span>
        </div>
      </div>
    </div>
    <!-- <player></player> -->
  </div>
</template>

<script>
export default {
  name: 'all-type',
  data () {
    return {
      title:'所有分类',
      typeChecked:0,
      isBack:true,
      typeList:[],
      allType:[]
    }
  },
  methods:{
    // 选择分类加高亮效果
    checkType(item){
      this.typeChecked = item.recommend_song_sheet_id;
      this.$router.push({
        path:'/index/son-list',
        query:{typeName:item.music_list_category_name,id:item.recommend_song_sheet_id}
      });
    },
    checkType1(item){
      this.typeChecked = item.id;
      this.$router.push({
        path:'/index/son-list',
        query:{typeName:item.music_list_category_name,id:item.id}
      });
    },
    // 获取歌单分类名称接口
    getSonType(){
      const url = this.$host1 + `/home/recommendSongSheet`;
      this.$axios.get(url).then(res=>{
      if(res.data.code == 200){
        this.typeList = res.data.data.list;
      }else{
        this.AlertWin(res.data.msg);
      }
      }).catch(err=>{
        console.log(err,'err-----');
      });
    },
    // 获取推荐分类以外的分类
    getOtherType(){
      const url = this.$host1 + `/home/category`;
      this.$axios.get(url).then(res=>{
      if(res.data.code == 200){
        this.allType = res.data.result;
      }else{
        this.AlertWin(res.data.msg);
      }
      }).catch(err=>{
        console.log(err,'err-----');
      });
    }
  },
  created(){
    this.getSonType();
    this.getOtherType();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container{
    height: 100vh;
    background-color: #fff;
    padding-bottom: 1.2rem;
    padding-top: 1rem;
  .type{
    width: 100%;
    background-color: #fff;
    padding: 0.24rem;
    box-sizing: border-box;
    .top{
      .title{
        font-weight:800;
        color:rgba(68,68,68,1);
      }
      .all-type{
        line-height: 0.32rem;
        font-weight:500;
        color:rgba(153,153,153,1);
      }
    }
    .type-list{
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      .content{
        flex-wrap: wrap;
        .tip{
          display: inline-block;
          text-align: center;
          margin-bottom: 0.17rem;
          margin-right: 0.05rem;
          width: 1.68rem;
          height: 0.68rem;
          line-height: 0.68rem;
          background:#fff;
          border:0.01rem solid rgba(187,187,187,1);
          border-radius:0.34rem;
          font-size: 0.28rem;
          font-weight:500;
          color:rgba(102,102,102,1);
        }
        .tip.active{
          background:rgba(116,8,180,1);
          color: #fff;
          border:0.01rem solid rgba(116,8,180,1);
        }
      }
    }
  }
}
</style>
